<template>
  <a-modal
    v-model:visible="personnelVisible"
    @ok="handleOk"
    @cancel="handleCancel"
    :width="800"
  >
    <template #title> {{ title }} </template>

    <a-input-search
      search-button
      v-model="keyWord"
      :style="{ width: '320px', marginBottom: '20px' }"
      placeholder="请选择人员"
    />

    <a-table
      @select="(e)=> select(e as number[])"
      :rowSelection="{ type: 'radio' }"
      :columns="columns"
      :data="personnelData.data"
    />
  </a-modal>
</template>

<script lang="ts" setup>
  import { reactive, ref, computed } from 'vue';
  import { GetPersonnelinformation } from '@/api/home/System settings/personal-information/index';

  let emits = defineEmits(['update:personnelVisible', 'personnelId']);
  const props = withDefaults(
    // 参数说明
    defineProps<{
      personnelVisible: boolean;
      title: string;
      columns: any;
      pageData: { page: number; size: number };
    }>(),
    {
      personnelVisible: false,
      title: '',
      columns: [
        {
          title: '姓名',
          dataIndex: 'name',
          width: '200',
          align: 'center',
        },
        {
          title: '部门',
          align: 'center',
          dataIndex: 'departmentName',
        },
        {
          title: '岗位',
          align: 'center',
          dataIndex: 'positionName',
        },
      ],
      pageData: () => ({
        page: 1,
        size: 10,
      }),
    }
  );

  const personnelData = reactive({ data: [] });
  const keyWord = ref();
  // 获取人员信息数据
  const Getuserlist = async () => {
    try {
      const res = await GetPersonnelinformation({
        ...props.pageData,
        keyWord: keyWord.value,
      });
      personnelData.data = res.content.data;
      personnelData.data.forEach((ele: any) => {
        ele.key = ele.id;
        ele.departmentName = ele.department.name;
        ele.positionName = ele.positionId.name;
      });
    } catch (err: unknown) {
      console.log(err);
    }
  };
  const data = reactive({ data: {} });
  const select = (e: number[]) => {
    const { id, name } = personnelData.data.filter(
      (ele: any) => ele.id === e[0]
    )[0];
    data.data = { id, name };
  };

  Getuserlist();
  const handleOk = () => {
    emits('update:personnelVisible', false);
    emits('personnelId', { ...data.data });
  };
  const handleCancel = () => {
    emits('update:personnelVisible', false);
  };
</script>

<style scoped lang="less"></style>
